Google Developer Expertsが語るWeb技術の最前線
https://gyazo.com/b0e3700c980b8358dd91d05a736f4c5f
【増枠】Google Developer Expertsが語るWeb技術の最前線 - connpass
GDE
プライバシーサンドボックスとサードパーティCookieの廃止
田中洋一郎(yoichiro)
Tably株式会社CTO
https://www.youtube.com/watch?v=jdQIqDPw5aM
Third Party Cookieとは
異なるサイトからトップレベルサイトにセット・送信される任意のCookie
用途は広告だけではない
ドメイン跨いだユーザーログイン
ユーザーの好み・優先傾向の保存、行動興味の関連付け
分析や設定のメンテナンス
CDNコンテンツのキャッシュ
想定外の利用
プライバシー侵害の問題まで発展してきた
サイト間でどういったサイトをみてきたのかを追跡できてしまうのは気持ちいいものではない
廃止する方向
追跡できるようなトラッキングはやめていく流れ
主要なユースケースをサポートするプライバシー保護技術を開発
Ads & Content Relevance
Measurement
Cross-sites Boundaries
Spam & Fraud fighting
廃止までのタイムライン
2024年のQ3、Q4はフェードアウトしてしまう予定
廃止された1%に該当しているかもわかるかもしれない
フェーズアウトの準備
1. 利用しているかのチェック
SameSite=Noneをチェック
HTTPヘッダー経由、JavaScript経由
Dev ToolsのIssueで見れる
Privacy Sandbox Analysis Tool
2. 破損をテスト
Chrome flagsを使ってテストする
chrome://flags/#test-third-party-cookie-phaseout
廃止前と廃止後でしっかりテストする
破損の報告
goo.gle/report-3pc-broken
障害が合った場合に猶予が欲しい場合申請ができる
条件あり
3. 軽減する
Third Party Deprecation Trial
Request additional migration time with the third-party cookie deprecation trial | Privacy Sandbox | Google for Developers
Enterprise policies
企業向け
BlockThirdPartyCokies ポリシーをfalseにする
CookiesAllowdForUrlsでURLを指定
4. サイトごとに情報を保存するクロスサイトCookieをCHIPSにて隔離
CHIPS
ひとつのトップレベルサイトだけに限定された永続状態を必要とするようなCookieの仕様例を想定した仕組み
5. 必要にリンクされた小さななグループを跨るクロスサイトCookie→Related Website Sets
ドメインの集合管の関係を理解するメカニズム
Third Party Cookieを許可できる範囲を決める事が可能
現時点で8サイトしか登録になってない
6. 他のサードパーティCookieのユースケース→関連するWeb APIへ移行する
Federated Credential Management (FedCM)
Private State Tokens
詐称やスパムの抑止
Topics API
関心ベースの広告
Protected Audience
リマーケティングとカスタムオーディエンス
Attribution Reporting
広告インプレッション/コンバージョン
Storage Access API
ユーザーインタラクションを伴うiframeのための Cookie アクセス要求
ブラウザと仕様のアップデート
矢倉眞隆(myakura)
Webが35周年(1989-03-12)
これまでの1年を振り返る
HTML/UI
JavaScriptに頼らないUIの提案が増えていっている
アクセシビリティ・スタイルが使えることも大事
Popover
クリックしたら開くメニューなど
Invokersと組み合わせる
Open UI Community Groupが提案していっている
HTML仕様にそのままスライドするものではない
CSS
ひたすら進化していってる
CSS Nesting
:has()
親セレクタなど
使いすぎるとセレクタのパフォーマンスが悪化する
Firefoxは亀のマークがついて警告されるらしい
@scope
スタイルの適応範囲を絞れる
カスケーティングの影響はウケる
@property
カスタムプロパティに型や初期値
アニメーション
dialogやpopoverへのアニメーションをつけやすくなる・宣言的にかける
transition-behavior
@starting-style
レイアウト
subgrid
ブロック要素に対するalign-content
タイポグラフィ
text-wrap: balance | pretty
行送り
word-break: auto-space
文節
text-autospace, text-space-trim
隙間調整
margin-trim, text-box-trim
文字とボックスの隙間調整
仕様の課題
ちょっと生焼け
仕様の進みは早くなった
小さい機能が増えた
最小限の機能を実装し、拡張しやすくしていく
使い出せるのは早いけど仕様での課題解決には時間がかかる
実装されて問題がわかることがある
フィードバックすると良い
実装の今はどう知るのか?
リリースノート
追加・廃止を知る
BaseLine
実装の状況を知るグループを定義
Newly available
実装が揃いたて
Widlely available
実装が揃って30ヶ月
互換性と相互運用性
Interopプロジェクト
仕様と実装の互換性を上げるプロジェクト
web-platform-tests
非互換を埋めるために標準が大事になってくる
ブラウザ動向
ChromeのThird Party Cookie廃止
iOSのブラウザ変更
EUだけでの展開
Webkit以外のエンジンが使えるようになる
ウェブブラウザ「Brave」のインストール数が急増、Appleがデジタル市場法準拠のためブラウザ選択画面を追加した影響か - GIGAZINE
Chrome拡張のManifest v2廃止
UA文字列の固定化
開発者は何ができるのか
動かないものがあったら報告
Chrome、Webkit、Mozillaのバグトラッカー
Bug reporting for the web | webcompat.com
ボランティアベースの活動
欲しいものを言ってみる
Interopへの提案
ブラウザのバグへのスター・Vote
ソーシャルメディアでのリクエスト
いろんな環境でテストしてみる
OS、端末、ブラウザ、エンジン
標準はすべての挙動を定義できているわけではない
たまたま動いてるだけなのかもしれない
使う人の属性までは取ってくれてないのでちゃんと使ってみる
Getting started with designing for web accessibility
Julia Undeutsch(yuridevat)
Accessibility First
WCAG知覚可能
情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。
WebAIM: The WebAIM Million - The 2023 report on the accessibility of the top 1,000,000 home pages
https://gyazo.com/0e31de14914a9507407844fe1baf3b84
カラーコントラスト
Color Contrast Checker
https://webaim.org/resources/contrastchecker/
https://webaim.org/resources/linkcontrastchecker/
Color Independency
色のみで示さないようにする
Link Text
Read more...
Click here
明確なリンクにしておくとスクリーンリーダーユーザーにもやさしい
アクセシビリティは可能な限りアクセスできるようにするために、後からではなく設計中にそのことを意識・確認しておく必要がある
パネルディスカッション
Web 技術の最前線
Webにまつわるイベント自体が減ってきてないか
他の分野よりも細分化してきている説
仕様が細かくなってきた
Web=JavaScriptのイメージが崩れてきている
TypeScriptという意味ではない
いろんな言語でWebアプリをかけるようになってきた
WASM
RustやC++の印象が強かったが
GCをサポートした言語でもかけるように
Java、Kotlin
今までWebに手を付けてない人がWebに手を付けられるようになってる
制約はまだある(DOMは触れない)
裏側で動いてくれて意識しないようになってくれることに期待
Webの小さな仕様が増えてきたけど試せてない
部品がタグになって使われるのは進む?
アクセシビリティについてもっと興味をもっていってほしい
2024-03-19